<template>
  <a-layout>
    <a-layout>
      <a-layout style="padding: 0 24px">
        <a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
          <a-row>
            <a-col :span="8">
              <a-button size="middle" type="primary" @click="handlerAdd">新增</a-button>
            </a-col>
          </a-row>
          <a-table
              :columns="columns"
              :data-source="tableData"
              :rowKey="record => record.id"
              :pagination="false">
            <template v-slot:action="{text,record}">
              <a-button size="middle" type="primary" @click="handlerEdit(record)">编辑</a-button>
              <a-button size="middle" :danger="true" @click="handlerRemove(record.id)">删除</a-button>
            </template>
          </a-table>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>

  <a-modal
      v-model:visible="modalVisible"
      title="分类"
      :confirm-loading="modalConfirmLoading"
      @ok="handlerModalOk">
    <a-form :model="formCategory" :label-col="formLabelCol" :wrapper-col="formWrapperCol">
      <a-form-item label="父级">
        <a-tree-select
            v-model:value="formCategory.parent"
            show-search
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="Please select"
            allow-clear
            tree-default-expand-all
            :replaceFields="fieldNames"
            :tree-data="treeData">
        </a-tree-select>
      </a-form-item>
      <a-form-item label="名称">
        <a-input v-model:value="formCategory.name"/>
      </a-form-item>
      <a-form-item label="排序">
        <a-input v-model:value="formCategory.sort"/>
      </a-form-item>
    </a-form>
  </a-modal>

</template>

<script>
import {onMounted, ref} from "vue";
import * as category from "@/api/wiki/category"
import {message,Modal} from "ant-design-vue";

export default {
  name: "AdminCategory",
  setup() {
    const tableData = ref([])
    const treeData= ref([])
    const columns = ref([
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name'
      },
      {
        title: '排序',
        dataIndex: 'sort',
        key: 'sort'
      }, {
        title: '操作',
        dataIndex: 'action',
        slots: {customRender: 'action'}
      }])
    const loading = ref(true)
    const fieldNames = ref({children: 'children', label: 'name', key: 'id', value: 'id'})
    //对话框是否可见
    const modalVisible = ref(false)
    //确定按钮 loading
    const modalConfirmLoading = ref(false)
    const formCategory = ref()
    const formLabelCol = ref({span: 4})
    const formWrapperCol = ref({span: 14})
    const searchObj = ref({})
    const categories = ref([])


    const handlerQuery = (params) => {
      category.categories().then(res => {
        if (res.success) {
          tableData.value = res.data[0].children
          treeData.value = res.data
          loading.value = false
        } else {
          message.error(res.msg);
        }
      })
    }


    const handlerSearch = () => {
      searchObj.value.current = 1
      searchObj.value.size = 2
      handlerQuery(searchObj.value)
    }

    const handlerEdit = (record) => {
      modalVisible.value = true
      formCategory.value = JSON.parse(JSON.stringify(record))
    }
    const handlerAdd = () => {
      modalVisible.value = true
      formCategory.value = {}
    }
    const handlerRemove = (id) => {
      Modal.confirm({
        title: '删除',
        content: '确定要删除这些数据吗?',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          category.remove(id).then(res => {
            if (res.status === 200) {
              message.success(res.msg);
              handlerQuery()
            } else {
              message.error(res.msg);
            }
          })
        },
        onCancel() {
        },

      });
    }


    const handlerModalOk = () => {
      modalConfirmLoading.value = true
      if (formCategory.value.id) {
        category.update(formCategory.value).then(res => {
          modalVisible.value = false
          modalConfirmLoading.value = false
          if (res.status === 200) {
            message.success(res.msg);
            handlerQuery()
          } else {
            message.error(res.msg);
          }
        })
      } else {
        category.save(formCategory.value).then(res => {
          modalVisible.value = false
          modalConfirmLoading.value = false
          if (res.success) {
            message.success(res.msg);
            handlerQuery()
          } else {
            message.error(res.msg);
          }
        })
      }
    }


    onMounted(() => {
      handlerQuery()
    })
    return {
      columns,
      tableData,
      treeData,
      loading,
      searchObj,
      categories,
      modalVisible,
      //确定按钮 loading
      modalConfirmLoading,
      formCategory,
      formLabelCol,
      formWrapperCol,
      // tree name
      fieldNames,

      handlerSearch,
      handlerRemove,
      handlerAdd,
      handlerEdit,
      handlerModalOk

    }
  }
}
</script>

<style scoped>

</style>
